<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>麻将桌</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="author" content="wqt">
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="dist/css/swiper.min.css" />
		<link rel="stylesheet" href="dist/css/index.min.css" />
		<script type="text/javascript" src="dist/js/hotcss.js" ></script>
		
		<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="src/js/loading.js" ></script>
		<script type="text/javascript" src="lib/swiper.jquery.min.js" ></script>
		<script type="text/javascript" src="//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js"></script>
		<script type="text/javascript" src="src/js/utils.js"></script>
	</head>
	<body>
		<section id="loadsection"></section>	
		
		
		<section id="content">
			<div class="mb-scene">
				<div class="mb-scene-block">
					<div id="mbScene" class="mb-scene-container swiper-container">
						<div class="mb-scene-wrapper swiper-wrapper">
							<div class="scene-item swiper-slide" style="background-image: url(src/img/mb-scene.jpg);"></div>
							<div class="scene-item swiper-slide" style="background-image: url(src/img/mb-scene.jpg);"></div>
						</div>
					</div>
					<div id="btnscenes" class="btns-scenes">
						<a class="btn-bedroom" href="javascript:void(0);">卧室</a>
						<a class="btn-livingroom" href="javascript:void(0);">客厅</a>
					</div>
					<div class="table-box">
						<!--<div class="table-image" style="background-image: url(src/img/scene-table.png);"></div>-->
						<div id="hammerTableImageBox" class="table-imagebox">
							<img class="responsive-image" style="transform-origin: center;" src="src/img/scene-table-test.png" />
						</div>
					</div>
				</div>
			</div>
			<div class="flexend-block">
				<div class="nav-mh">
					<a class="buy-btn" href="javascript:void(0);">在线购买</a>
					<a class="diy-btn" href="javascript:void(0);">DIY麻将桌</a>
				</div>
				<div id="tableSwiper" class="table-swiper swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="mh-table">
								<a class="mh-item" data-mhurl="src/img/mhtable.png" href="javascript:void(0);">
									<img class="responsive-image" src="src/img/mhtable.png" alt="麻将桌1"/>
								</a>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="mh-table">
								<a class="mh-item" data-mhurl="src/img/mhtable.png" href="javascript:void(0);">
									<img class="responsive-image" src="src/img/mhtable.png" alt="麻将桌1"/>
								</a>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="mh-table mh-table-active">
								<a class="mh-item" data-mhurl="src/img/mhtable.png" href="javascript:void(0);">
								 	<img class="responsive-image" src="src/img/mhtable.png" alt="麻将桌1"/>
								</a>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="mh-table">
								<a class="mh-item" data-mhurl="src/img/mhtable.png" href="javascript:void(0);">
									<img class="responsive-image" src="src/img/mhtable.png" alt="麻将桌1"/>
								</a>
							</div>
						</div>
					</div>
					<a class="table-swiper-prev" href="javascript:void(0)"></a>
					<a class="table-swiper-next" href="javascript:void(0)"></a>
				</div>
				<div id="" class="table-swiper swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="mh-table">
								<a class="mh-item" data-mhurl="src/img/mhtable.png" href="javascript:void(0);">
									<img class="responsive-image" src="src/img/mhtable.png" alt="麻将桌1"/>
								</a>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="mh-table">
								<a class="mh-item" data-mhurl="src/img/mhtable.png" href="javascript:void(0);">
									<img class="responsive-image" src="src/img/mhtable.png" alt="麻将桌1"/>
								</a>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="mh-table mh-table-active">
								<a class="mh-item" data-mhurl="src/img/mhtable.png" href="javascript:void(0);">
								 	<img class="responsive-image" src="src/img/mhtable.png" alt="麻将桌1"/>
								</a>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="mh-table">
								<a class="mh-item" data-mhurl="src/img/mhtable.png" href="javascript:void(0);">
									<img class="responsive-image" src="src/img/mhtable.png" alt="麻将桌1"/>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<script type="text/javascript" src="src/js/hammerpan.js" ></script>
		<script>
			$(function(){
				$('#loadsection').load('when')
				
				var $mbScene = $('#mbScene')
				var $btnscenes = $('#btnscenes')
				var $btnbedroom = $btnscenes.find('.btn-bedroom')
				var $btnlivingroom = $btnscenes.find('.btn-livingroom')
				var $tableSwiper = $('#tableSwiper')
				var $mhItem = $tableSwiper.find('.mh-item')
				var tableswiper = new Swiper('#tableSwiper',{
					slidesPerView : 4
				})
				
				var sceneSwiper = new Swiper('#mbScene')
				
				
				$btnbedroom.on('click',function(){
					var $this = $(this)
					if($this.hasClass('active')) return false;
					sceneSwiper.slideTo(0, 1000, false);
					$this.addClass('active').siblings().removeClass('active')
				})
				
				$btnlivingroom.on('click',function(){
					var $this = $(this)
					if($this.hasClass('active')) return false;
					sceneSwiper.slideTo(1, 1000, false);
					$this.addClass('active').siblings().removeClass('active')
				}).click()
				
				
				
				
			
				
				hotcss.callback = function(){
				  //your code here
				  tableswiper.onResize()
				}
				
				
			})
		</script>
		
	</body>
</html>
